<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>

    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->
    <style>
        .centered-div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            width: 500px;
            height: 400px;
            z-index: 999;
            display: none;
            border: 1px solid black;
            /*box-shadow: 3.1px 6.2px 6.2px hsl(0deg 0% 0% / 0.40);*/
        }

        .update-div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            width: 500px;
            height: 500px;
            z-index: 999;
            display: none;
            border: 1px solid black;
            /*box-shadow: 3.1px 6.2px 6.2px hsl(0deg 0% 0% / 0.40);*/
        }
    </style>
</head>
<body>
<div id='app'>
    <el-button type="primary" round @click="addMemberHandle">刷新数据</el-button>
    <el-button type="primary" round @click="addUser">新增用户</el-button>
    <el-table
            :data='pagedData'
            stripe
            :border='true'
            max-height='800px'
    >
        <el-table-column  header-align="center" align="center" width="250px" prop='nickname' label='昵称'></el-table-column>
        <el-table-column  header-align="center" align="center" width="250px" prop='username' label='用户名'></el-table-column>
        <el-table-column  header-align="center" align="center" width="250px" prop='psw' label='密码'></el-table-column>
        <el-table-column  header-align="center" align="center" width="250px" prop='email' label='邮箱'></el-table-column>
        <el-table-column  header-align="center" align="center" width="250px" prop='money' label='余额'></el-table-column>
        <el-table-column  header-align="center" align="center" width="250px" fixed='right' label='操作'>
            <template slot-scope='scope'>
                <el-button @click='updateaddUser(scope.row.username)'>修改</el-button>
                <el-button @click="removeCol(scope.row.username)">移除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="tabListPage">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10,11,12,13,14,15]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>

        <div class="centered-div" id="windows" style="border: none;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3),0 -1px 2px rgba(0, 0, 0, 0.2);">
            <h1>新增用户</h1>
            <el-form ref="userForm" :model="userForm" label-width="80px">
                <el-form-item label="用户名：">
                    <el-input v-model="userForm.username"></el-input>
                </el-form-item>
                <el-form-item label="昵称：">
                    <el-input v-model="userForm.nickname"></el-input>
                </el-form-item>
                <el-form-item label="密码：">
                    <el-input v-model="userForm.psw"></el-input>
                </el-form-item>
                <el-form-item label="邮箱：">
                    <el-input v-model="userForm.email"></el-input>
                </el-form-item>
            </el-form>
            <div style="display: flex; justify-content: center; margin-top: 20px;">
                <el-button type="primary" plain @click="onSubmit('userForm')">确认</el-button>
                <el-button type="success" plain @click="onCacel" style="margin-left: 10px;">取消</el-button>
            </div>
        </div>


        <div class="update-div" id="update" style="border: none;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3),0 -1px 2px rgba(0, 0, 0, 0.2);">
            <h1>修改信息</h1>
            <el-form ref="updateForm" :model="updateForm" label-width="80px">
                <el-form-item label="用户名：">
                    <el-input v-model="updateForm.username"></el-input>
                </el-form-item>
                <el-form-item label="昵称：">
                    <el-input v-model="updateForm.nickname"></el-input>
                </el-form-item>
                <el-form-item label="密码：">
                    <el-input v-model="updateForm.psw"></el-input>
                </el-form-item>
                <el-form-item label="邮箱：">
                    <el-input v-model="updateForm.email"></el-input>
                </el-form-item>
                <el-form-item label="余额：">
                    <el-input v-model="updateForm.money"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" plain @click="UpdateonSubmit('updateForm')">确认</el-button>
            <el-button type="success" plain @click="updateonCacel">取消</el-button>
        </div>
    </transition>


</div>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                tableData1: [],
                currentRow: null,
                mutipleSelection: [],
                search: '',
                userForm: {
                    username: '',
                    nickname: '',
                    psw: '',
                    email: ''
                },
                updateForm: {
                    username: '',
                    nickname: '',
                    psw: '',
                    email: '',
                    money: ''
                },
                // 默认显示第一页
                currentPage: 1,
                // 总条数，根据接口获取数据长度(注意：这里不能为空)
                total: 0,
                // 默认每页显示的条数（可修改）
                pageSize: 10,
                // 当前页面数据
                pagedData: []
            }
        },
        mounted() {
            // 在mounted生命周期钩子中延迟调用addMemberHandle方法，确保Vue实例完全挂载到DOM之后再执行数据获取操作
            setTimeout(() => {
                this.addMemberHandle();
            }, 0);
        },
        methods: {
            addMemberHandle() {
                axios.get("http://localhost:8080/MillionYuan/getAllUser")
                    .then((resp) => {
                        this.tableData1 = resp.data;
                        this.total = this.tableData1.length;
                        this.handleSizeChange(this.pageSize);
                        console.log(resp.data);
                    })
                    .catch((error) => {
                        console.error("获取数据失败:", error);
                    });
            },
            addUser() {
                var centeredDiv = document.getElementById("windows");
                centeredDiv.style.display = "block";
            },
            onCacel() {
                var centeredDiv = document.getElementById("windows");
                centeredDiv.style.display = "none";
            },
            updateaddUser(username) {
                // 使用 find 方法来查找对应的用户信息
                const userData = this.tableData1.find(row => row.username === username);
                if (userData) {
                    // 如果找到了用户信息，则直接将其赋值给 updateForm
                    this.updateForm = userData;
                    // 显示修改窗口
                    var centeredDiv = document.getElementById("update");
                    centeredDiv.style.display = "block";
                } else {
                    console.error('找不到对应的用户信息');
                }
            },

            updateonCacel() {
                var centeredDiv = document.getElementById("update");
                centeredDiv.style.display = "none";
            },
            onSubmit() {
                console.log('用户名：', this.userForm);
                if (!this.userForm.username || !this.userForm.psw || !this.userForm.nickname || !this.userForm.email) {
                    this.$message.warning("数据不能为空");
                } else {
                    axios.post("http://localhost:8080/MillionYuan/insertUser", {
                        username: this.userForm.username,
                        nickname: this.userForm.nickname,
                        psw: this.userForm.psw,
                        email: this.userForm.email
                    })
                        .then((resp) => {
                            // 处理后端返回的响应数据
                            console.log('提交成功：', resp.data);
                            this.$message.success("提交成功");
                            this.onCacel(); //退出窗口
                            this.addMemberHandle(); //刷新数据表
                        })
                        .catch((error) => {
                            // 处理请求失败的情况
                            console.error("提交失败:", error);
                        });
                }
            },
            removeCol(username) {
                this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log("移除的数据为：" + username);
                    axios.post("http://localhost:8080/MillionYuan/delUser", {
                        username: username,
                    }).then((resp) => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.addMemberHandle();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            UpdateonSubmit() {
                if (this.updateForm.username == null) {
                    this.$message.warning("用户名不能为空");
                } else {
                    axios.post("http://localhost:8080/MillionYuan/updateUser", {
                        username: this.updateForm.username,
                        nickname: this.updateForm.nickname,
                        psw: this.updateForm.psw,
                        email: this.updateForm.email,
                        money: this.updateForm.money
                    }).then((resp) => {
                        this.$message.success("修改成功");
                        this.updateonCacel();//关闭窗口
                        this.addMemberHandle();//刷新数据
                    })
                }
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.currentPage = 1;
                const startIndex = (this.currentPage - 1) * this.pageSize;
                const endIndex = startIndex + this.pageSize;
                this.pagedData = this.tableData1.slice(startIndex, endIndex);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                const startIndex = (this.currentPage - 1) * this.pageSize;
                const endIndex = startIndex + this.pageSize;
                this.pagedData = this.tableData1.slice(startIndex, endIndex);
            }
        }
    });
</script>
</body>
</html>
